<template>
  <view class="container">
    <view class="header">
      <text class="title">选择城市</text>
      <text class="close" @click="closePage">×</text>
    </view>
    <view class="search-bar">
      <icon type="search" size="20"></icon>
      <input
        type="text"
        placeholder="搜索城市名称或拼音"
        v-model="searchText"
      />
    </view>
    <view class="city-list">
      <view
        class="city-item"
        v-for="city in filteredCities"
        :key="city"
        @click="selectCity(city)"
      >
        <text>{{city}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "citypicker",
  data() {
    return {
      searchText: "",
      cities: ["北京", "上海", "广州", "深圳", "杭州", "成都", "武汉", "西安", "南京", "重庆"]
    };
  },
  computed: {
    filteredCities() {
      if (!this.searchText) return this.cities;
      return this.cities.filter(city =>
        city.includes(this.searchText) || city[0].toLowerCase() === this.searchText[0].toLowerCase()
      );
    }
  },
  methods: {
    closePage() {
      this.$emit("close");
    },
    selectCity(city) {
      this.$emit("select", city);
    }
  }
};
</script>

<style>
/* 整体容器样式 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 头部样式 */
.header {
  width: 100%;
  display: flex;
  justify-content: space - between;
  align-items: center;
  padding: 30rpx;
  background-color: #f8f8f8;
  border-bottom: 2rpx solid #e0e0e0;
}

.title {
  margin-left: 20rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.close {
  margin-left: 500rpx;
  font-size: 48rpx;
  cursor: pointer;
  color: #999;
}

.close:hover {
  color: #666;
}

/* 搜索栏样式 */
.search-bar {
  width: 90%;
  display: flex;
  align-items: center;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 40rpx 0;
}

.search-bar icon {
  margin-left: 20rpx;
  color: #999;
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  margin-left: 20rpx;
  font-size: 32rpx;
  color: #333;
}

/* 城市列表样式 */
.city-list {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.city-item {
  width: 30%;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.city-item:hover {
  background-color: #eff6ff;
  color: #2563eb;
}

.city-item text {
  font-size: 32rpx;
}
</style>